<template>
	<view class="container">
		<u-navbar title='成员列表' :title-bold='true' :border-bottom='false' ></u-navbar>
		
		
		<view class="list">
		
		<view  class="item" v-for="(item,index) in list" :key="index">
			<view class="card" @click="goTo(item.id)">
				<view class="left">
					<!-- <u-avatar bg-color='#6EC9E1'  :text="item.username" ></u-avatar> -->
					<view class="avatar">
						{{item.username.substring(0, 1)}}
					</view>
					<view class="user">
						<view class="info">
							<span class="name">{{item.username}}</span>
							<span class="age">{{item.age}}</span>
							<span class="sex">{{item.gender_text}}</span>
						</view>
					<!-- 	<view class="info ">
							<span>联系电话</span>
							<span>{{item.mobile}}</span>
						</view> -->
					</view>
				</view>
				<view class="right">
					<view class="_img" @click.stop="del(item)">
						<image  class="eidt" src="@/static/icon/del2.png" mode=""></image>
					</view>
					<view>
						<image  class="eidt" src="@/static/img/mine/edit.png" mode=""></image>
					</view>
				</view>
				
			</view>
		</view>
		
		
		<view class="item" @click="goTo(0)">
			<view class="card addmember" >
				<u-icon  name="plus" color="#6EC9E1" size="26" bold="true"></u-icon>
				<span>添加成员</span>
			</view>
		</view>
		</view>
		<!--  -->
		
		<!-- 提示 -->
		<u-toast ref="uToast" />
		<u-modal v-model="show" :content="content" @confirm='removeMember' @cancel='cancellation' :mask-close-able="true" :show-cancel-button='true' ></u-modal>
	</view>
</template>

<script>
	import {memberList,delMember } from '@/api/index.js'
	export default{
		data(){
			return{
				list:[],
				show:false,
				content:'',
				removeId:''
			}
		},
		onShow() {
			this.getMemberList()
		},
		methods:{
			goTo(id){
				uni.navigateTo({
					url:'edit-member?id='+id
				})
			},
			removeMember(){
				let that=this
				delMember({'id':that.removeId}).then(res=>{
					if(res.code==1){
						that.getMemberList()
					}else{
						that.$refs.uToast.show({
							title: res.msg
						})
					}
				})
			},
			cancellation(){
				this.show=false
				this.content=''
				this.removeId=''
			},
			del(item){
				this.show=true
				this.content='确定要删除【'+item.username+'】吗？'
				this.removeId=item.id
			},
			getMemberList(){
				let that=this
				memberList().then(res=>{
					if(res && res.code==1){
						that.list=res.data.list
					}else{
						that.$refs.uToast.show({
							title: res.msg
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container{
		height: 100vh;
		background-color: #EEE;
		position: relative;
		.list{
			padding-bottom: 70px;
		}
		.item{
			margin-top: 20rpx;
			padding:0 30rpx;
			.addmember{
				padding: 30rpx !important;
				color:#6EC9E1 ;
				margin-top: 20px;
				justify-content: center !important;
			}
			.card{
				background-color: #FFF;
				border-radius: 10rpx;
				padding:30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					display: flex;
					align-items: center;
					
					.avatar{
						margin-right: 16rpx;
						min-width: 84rpx;min-height: 84rpx;
						width: 84rpx;height: 84rpx;
						border-radius: 50%;
						color: #FFF;
						font-size: 18px;
						background-color: #6EC9E1;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.user{
						.info{
							padding: 10rpx 0;
							span{
								margin: 0 10rpx;
								font-size: small;
							}
							.name{
								font-weight: 500;
								font-size: 16px;
							}
							.age,.sex{
								color: #6EC9E1;
								padding: 4rpx 8rpx;
								border-radius: 8rpx;
								background-color: rgba(229, 229, 229, 0.5);
							}
						}
					}
				}
				
				.right{
					display: flex;justify-content: center;
					._img{
						padding:0 30rpx;
					}
					.eidt{
						height: 16px;width: 16px;
					}
					
				}
			}
		}
		

	}
</style>